<template>
  <div style="padding: 0px">
    <div :style="{ width: offsetwidth + 'px', height: offsetheight + 'px' }">
      <el-amap
        vid="amapDemo"
        :center="center"
        :amap-manager="amapManager"
        :zoom="zoom"
        :events="events"
        class="amap-demo"
      >
        <el-amap-marker
          vid="component-marker"
          ref="marker"
          v-if="marker.position.length != 0"
          :position="marker.position"
          :events="marker.events"
        ></el-amap-marker>

        <el-amap-marker
          vid="event-marker"
          ref="marker_event"
          v-for="(marker, index) in eventMarkers"
          :key="index"
          :position="marker.position"
          :events="marker.events"
          :icon="marker.icon"
        ></el-amap-marker>

        <el-amap-info-window
          :position="infoDlg.position"
          :visible="infoDlg.visible"
        >
          <div>
            <div
              style="
                padding: 10px;
                font-weight: bold;
                border-bottom: 1px solid #ebeef5;
              "
            >
              {{ infoDlg.title }}
            </div>
            <div style="padding: 10px">
              <div v-for="(item, index) in infoDlg.msg" :key="index">
                {{ item }}
              </div>

              <el-button
                type="primary"
                @click="onClick(infoDlg.info)"
                size="mini"
                class="mt5"
                v-if="infoDlg.info.what == 'question'"
                >查看详情</el-button
              >
            </div>
          </div>
        </el-amap-info-window>

        <!-- 编辑多边形操作 -->
        <el-amap-polygon
          v-for="(polygon, index) in polygons"
          :key="index"
          :vid="index"
          :path="polygon.path"
          :fillOpacity="polygon.fillOpacity"
        ></el-amap-polygon>

        <el-amap-polygon
          :path="pathPolygon.path"
          fillOpacity="0.3"
          fillColor="#FFAA00"
        ></el-amap-polygon>
      </el-amap>
    </div>

    <div class="a1" :style="{ top: 75 + 'px', left: 15 + 'px' }">
      <template v-if="state == '1'">
        <el-button
          type="primary"
          icon="el-icon-menu"
          @click="open"
          style="background: #fff; color: #4bacc6"
          class="h1"
        ></el-button>

        <div class="a3 h3 pointer" @click="question">事件</div>
        <div class="a3 h3 pointer" @click="user">网格员</div>

        <!--
        <div class="a4 h3 pointer" @click="company">企业<br />单位</div>

        <div class="a4 h3 pointer" @click="trajectory">网格员<br />轨迹</div>
        -->

        <div class="a4 h3 pointer" @click="grid">网格<br />列表</div>
      </template>

      <template v-else>
        <!-- <el-button type="primary" size="small" icon="el-icon-arrow-right" 
	@click="open" style="background:#4BACC6;"
	></el-button> -->

        <el-button
          type="primary"
          icon="el-icon-menu"
          @click="open"
          style="background: #4bacc6"
          class="h1"
        ></el-button>
      </template>
    </div>

    <el-card
      class="box-card a2"
      v-if="dlg && state == '1'"
      :style="{ top: 75 + 'px', left: 80 + 'px' }"
      :body-style="{ padding: '0px' }"
    >
      <div slot="header" class="clearfix">
        <span class="h4">{{ current.name }}</span>

        <el-button
          style="float: right; padding: 5px; margin-left: 5px"
          icon="el-icon-close"
          @click="closeDlg"
        ></el-button>
      </div>

      <el-container
        :style="{ height: offsetheight - 75 + 'px' }"
        v-if="showdlg"
      >
        <el-main style="padding: 10px">
          <trajectory
            v-if="what == 'trajectory'"
            :treedata="treedata"
            v-on:playback="playback"
          ></trajectory>

          <question
            v-if="what == 'question'"
            :treedata="treedata"
            v-on:getpoint="getpoint"
          ></question>

          <user
            v-if="what == 'user'"
            :treedata="treedata"
            v-on:getpoint="getpoint"
          ></user>

          <company
            v-if="what == 'company'"
            :treedata="treedata"
            v-on:getpoint="getpoint"
          ></company>

          <grid
            v-if="what == 'grid'"
            :treedata="treedata"
            v-on:showgrid="showgrid"
            v-on:getpoint="getpoint"
          ></grid>
        </el-main>
      </el-container>
    </el-card>

    <!-- 事件详情 -->
    <el-dialog
      :title="currentEvent.info.question_title"
      :visible.sync="eventDialogVisible"
      append-to-body
      width="900px"
    >
      <eventinfo :obj="currentEvent"></eventinfo>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

import Vue from "vue";
import daterange from "@/components/daterange";
import trajectory from "./components/trajectory";
import question from "./components/question";
import user from "./components/user";
import company from "./components/company";
import grid from "./components/grid";
import eventinfo from "@/views/event/info";

import VueAMap from "vue-amap";

import { lazyAMapApiLoaderInstance } from "vue-amap";

let amapManager = new VueAMap.AMapManager();
//const loadPromise = VueAMap.lazyAMapApiLoaderInstance();

export default {
  name: "dashboard",

  data() {
    return {
      offsetwidth: document.documentElement.clientWidth - 210,
      offsetheight: document.documentElement.clientHeight - 70,

      state: "0",
      dlg: false,
      showdlg: true,

      what: "",

      current: {},

      treedata: [],

      pathSimplifierIns: null,

      infoWindow: null,

      zoom: 10,
      center: [],
      //center: [121.59996, 31.197646],
      //center: [116.400274, 39.905812],
      amapManager,

      marker: {
        //position: [121.5273285, 31.21515044],
        position: [],
        // events: {
        // 	click: () => {
        // 		this.clickMarker();
        // 	},
        // },
        // visible: true,
        // draggable: false,
        //template: '<span>1</span>',
        // info : {
        // 	event_longitude : 121.59996,
        // 	event_latitude : 31.197646,
        // },
      },

      eventMarkers: [],

      polygons: [],

      pathPolygon: {
        path: [],
      },

      task_type_label: ["", "紧急任务", "普通", "检查", "日常"],

      status_label: ["", "处理中", "已完成"],

      polygon: null,

      events: {
        init(o) {
          // let marker = new AMap.Marker({
          //   position: [121.59996, 31.197646]
          // });

          // marker.setMap(o);

          AMap.plugin("AMap.DistrictSearch", () => {
            // 创建行政区查询对象
            var district = new AMap.DistrictSearch({
              // 返回行政区边界坐标等具体信息
              extensions: "all",
              // 设置查询行政区级别为 区
              level: "district",
            });

            district.search("610400", (status, result) => {
              console.log("result");
              console.log(result);
              //console.log(this);

              let polygon = new AMap.Polygon({
                path: result.districtList[0].boundaries,
                fillOpacity: 0,
                strokeWeight: 5,
              });

              polygon.setMap(o);

              o.setFitView(polygon);
              //o.setZoom(10);
              //this.initPolygon(result.districtList[0].boundaries);
              // this.polygon.path = ;
              // //新增状态，以上级中心点作为中心。
              // if(this.currentGrid.id == undefined){
              // 	this.center = [
              // 		result.districtList[0].center.lng,
              // 		result.districtList[0].center.lat
              // 	];
              // }
            });
          });
        },
      },

      infoDlg: {
        position: [108.705117, 34.333439],
        info: {},
        visible: false,
        title: "",
        msg: [],
      },

      eventDialogVisible: false,
      currentEvent: {
        info: {
          title: "",
        },
      },
    };
  },

  props: {},

  components: {
    daterange,
    trajectory,
    question,
    user,
    company,
    grid,
    eventinfo,
  },

  computed: {
    ...mapGetters({
      c: "center",
      cc: "cityCode",
    }),
  },

  methods: {
    open() {
      this.state = this.state == "1" ? "0" : "1";
    },

    close() {
      this.state = "0";
    },

    question() {
      console.log("question");
      this.current = {
        name: "事件",
      };
      this.what = "question";
      this.dlg = true;
      this.showdlg = true;
    },
    user() {
      console.log("user");
      this.current = {
        name: "网格员",
      };
      this.what = "user";
      this.dlg = true;
      this.showdlg = true;
    },
    // company() {
    //   console.log("company");
    //   this.current = {
    //     name: "企业单位",
    //   };
    //   this.what = "company";
    //   this.dlg = true;
    //   this.showdlg = true;
    // },
    // trajectory() {
    //   this.current = {
    //     name: "网格员轨迹",
    //   };
    //   this.what = "trajectory";
    //   this.dlg = true;
    //   this.showdlg = true;
    // },
    grid() {
      console.log("grid");
      this.current = {
        name: "网格列表",
      };
      this.what = "grid";
      this.dlg = true;
      this.showdlg = true;
    },

    closeDlg() {
      this.dlg = false;
    },

    init() {
      this.$http({
        fun: "onlineList",
        grid_id: 1,
        cb: (res) => {
          console.log("onlineList :  " , res);
          this.onlineList = res;
        },
      });
    },

    playback(para, gridinfo) {
      console.log("playback");
      console.log(para);
      console.log("gridinfo");
      console.log(gridinfo);

      this.clearAll();

      this.$http({
        fun: "userTrajectory",
        ...para,
        cb: (res) => {
          if (res.length == 0) {
            this.$message.error("没有数据");
            return;
          }
          let arr = [];
          let time = [];
          res.forEach((item) => {
            arr.push([item.longitude, item.latitude]);
            time.push(item.create_time);
          });
          this.setPathSimplifier(arr, para.name, time);
        },
      });

      if (gridinfo.mapinfo != undefined && gridinfo.mapinfo != "") {
        //手画的网格
        if (parseInt(gridinfo.type) > 2) {
          const obj = JSON.parse(gridinfo.mapinfo);
          this.pathPolygon.path = obj.path;
        } else {
          AMap.plugin("AMap.DistrictSearch", () => {
            // 创建行政区查询对象
            var district = new AMap.DistrictSearch({
              // 返回行政区边界坐标等具体信息
              extensions: "all",
              // 设置查询行政区级别为 区
              level: "district",
            });

            district.search(gridinfo.mapinfo, (status, result) => {
              console.log(result);
              this.pathPolygon.path = result.districtList[0].boundaries;
            });
          });
        }
      }
    },

    clearAll() {
      //把已有的点干掉。
      this.marker.position = [];
      //窗体干掉
      if (this.infoWindow != null) {
        this.infoWindow.close();
      }
      //如果有未销毁的轨迹,巡航器，全干掉。
      if (this.pathSimplifierIns != null) {
        this.pathSimplifierIns.setData([
          {
            name: "",
            path: [],
          },
        ]);
        this.pathSimplifierIns.clearPathNavigators();
      }

      //网格干掉
      if (this.polygon != null) {
        this.polygon.setPath([]);
      }

      this.pathPolygon.path = [];
    },

    setPathSimplifier(data, name, time) {
      const o = this.amapManager.getMap();

      AMapUI.loadUI(["misc/PathSimplifier"], (PathSimplifier) => {
        if (this.pathSimplifierIns == null) {
          this.pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: o, //所属的地图实例

            getPath: function (pathData, pathIndex) {
              return pathData.path;
            },
            getHoverTitle: function (pathData, pathIndex, pointIndex) {
              if (pointIndex >= 0) {
                return (
                  pathData.name +
                  "，点：" +
                  pointIndex +
                  "/" +
                  pathData.path.length +
                  "， 时间 ：" +
                  pathData.time[pointIndex]
                );
              }
              return pathData.name + "，点数量" + pathData.path.length;
            },
            renderOptions: {
              renderAllPointsIfNumberBelow: 100, //绘制路线节点，如不需要可设置为-1
            },
          });
        }

        this.pathSimplifierIns.setData([
          {
            name: name,
            path: data,
            time,
          },
        ]);

        this.pathSimplifierIns.clearPathNavigators();

        let navg1 = this.pathSimplifierIns.createPathNavigator(0, {
          loop: true, //循环播放
          speed: 120, //巡航速度，单位千米/小时
          pathNavigatorStyle: {
            width: 24,
            height: 24,
            content: PathSimplifier.Render.Canvas.getImageContent(
              "./person1.png",
              () => {
                this.pathSimplifierIns.renderLater();
              },
              () => {
                console.log("图片加载失败");
              }
            ),
            strokeStyle: null,
            fillStyle: null,
          },
        });

        navg1.start();
      });
    },

    changeDlg() {
      this.showdlg = !this.showdlg;
    },

    getpoint(item) {
      this.clearAll();
      if (
        item.what == "company" ||
        (item.what == "question" && item.status != "1")
      ) {
        this.marker.position = [item.lon, item.lat];

        this.marker.events = {
          click: () => {
            this.clickMarker1(item);
          },
        };

        this.marker["info"] = item;

        this.$nextTick(() => {
          this.marker.visible = true;
        });
      }

      this.center = [parseFloat(item.lon), parseFloat(item.lat)];
    },

    clickMarker(item) {
      if (this.marker.position.length == 0) {
        return;
      }
      const o = this.amapManager.getMap();

      AMapUI.loadUI(["overlay/SimpleInfoWindow"], (SimpleInfoWindow) => {
        if (this.infoWindow == null) {
          this.infoWindow = new SimpleInfoWindow({
            offset: new AMap.Pixel(0, -31),
          });
        }

        var msg = "";
        var title = "";

        const { what, lon, lat } = this.marker.info;

        if (what == "question") {
          const {
            question_title,
            release_name,
            grid_names,
            task_type,
            status,
            release_time,
            handler_grid_name,
          } = this.marker.info;

          title = question_title;

          msg =
            "上报人：" +
            release_name +
            "<br>" +
            "上报网络：" +
            grid_names +
            "<br>" +
            "任务类型：" +
            this.task_type_label[parseInt(task_type)] +
            "<br>" +
            "处理状态：" +
            this.status_label[parseInt(status)] +
            "<br>" +
            "创建事件：" +
            release_time; // + '<br>' +
          //'当前处理人：' + handler_grid_name ;
        } else if (what == "user") {
          const { name, mobile, company_name } = this.marker.info;

          title = name;

          msg =
            "人员名称：" +
            name +
            "<br>" +
            "联系电话：" +
            (mobile == undefined ? "" : mobile) +
            "<br>" +
            "所属网格：" +
            company_name;
        } else if (what == "company") {
          const {
            name,
            company_type_name,
            address,
            hb_name,
            hb_mobile,
            lxr_name,
            lxr_phone,
          } = this.marker.info;

          title = name;

          msg =
            "企业名称：" +
            name +
            "<br>" +
            "企业类型：" +
            company_type_name +
            "<br>" +
            "企业地址：" +
            address +
            "<br>" +
            "环保联系人：" +
            hb_name +
            "<br>" +
            "环保联系人电话：" +
            hb_mobile +
            "<br>" +
            "联系人：" +
            (lxr_name == undefined ? "" : lxr_name) +
            "<br>" +
            "联系人电话：" +
            (lxr_phone == undefined ? "" : lxr_phone);
        }

        this.infoWindow.setInfoTitle(title);
        this.infoWindow.setInfoBody(msg);
        this.infoWindow.open(o, [lon, lat]);
      });
    },

    //点击初始化的点
    clickMarker1(item) {
      this.clearAll();
      console.log("点击初始化的点");
      console.log(item);
      const { what, lon, lat } = item;

      this.infoDlg.position = [lon, lat];
      this.infoDlg.info = item;
      this.infoDlg.msg = [];

      if (what == "question") {
        const {
          question_title,
          release_name,
          grid_names,
          task_type,
          status,
          release_time,
        } = item;

        this.infoDlg.title = question_title;

        this.infoDlg.msg.push("上报人：" + release_name);
        this.infoDlg.msg.push("上报网络：" + grid_names);
        this.infoDlg.msg.push(
          "任务类型：" + this.task_type_label[parseInt(task_type)]
        );
        this.infoDlg.msg.push(
          "处理状态：" + this.status_label[parseInt(status)]
        );
        this.infoDlg.msg.push("创建事件：" + release_time);
      } else if (what == "user") {
        const { name, mobile, company_name } = item;

        this.infoDlg.title = name;

        this.infoDlg.msg.push("人员名称：" + name);
        this.infoDlg.msg.push(
          "联系电话：" + (mobile == undefined ? "" : mobile)
        );
        this.infoDlg.msg.push("所属网格：" + company_name);
      } else if (what == "company") {
        const {
          name,
          company_type_name,
          address,
          hb_name,
          hb_mobile,
          lxr_name,
          lxr_phone,
        } = item;

        this.infoDlg.title = name;

        this.infoDlg.msg.push("企业名称：" + name);
        this.infoDlg.msg.push("企业类型：" + company_type_name);
        this.infoDlg.msg.push("企业地址：" + address);
        this.infoDlg.msg.push("环保联系人：" + hb_name);
        this.infoDlg.msg.push("环保联系人电话：" + hb_mobile);
        this.infoDlg.msg.push(
          "联系人：" + (lxr_name == undefined ? "" : lxr_name)
        );
        this.infoDlg.msg.push(
          "联系人电话：" + (lxr_phone == undefined ? "" : lxr_phone)
        );
      }

      this.center = [lon, lat];
      const o = this.amapManager.getMap();
      o.setZoom(15);

      this.infoDlg.visible = false;
      this.$nextTick(() => {
        this.infoDlg.visible = true;
      });
    },

    showgrid(item) {
      this.clearAll();

      console.log("showgrid");
      console.log(item);

      const map = this.amapManager.getMap();

      if (item.mapinfo == undefined) {
        if (item.id != "1") {
          this.$message.error("没有数据");
        }
        return;
      }

      if (this.polygon == null) {
        this.polygon = new AMap.Polygon({
          path: [],
          strokeColor: "#FF33FF",
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillOpacity: 0.4,
          fillColor: "#1791fc",
          zIndex: 50,
        });
        map.add(this.polygon);
      }

      if (parseInt(item.type) > 2) {
        const obj = JSON.parse(item.mapinfo);
        this.polygon.setPath(obj.path);
        map.setFitView([this.polygon]);
      } else {
        AMap.plugin("AMap.DistrictSearch", () => {
          // 创建行政区查询对象
          var district = new AMap.DistrictSearch({
            // 返回行政区边界坐标等具体信息
            extensions: "all",
            // 设置查询行政区级别为 区
            level: "district",
          });

          district.search(item.mapinfo, (status, result) => {
            console.log(result);
            this.polygon.setPath(result.districtList[0].boundaries);
            map.setFitView([this.polygon]);
          });
        });
      }
    },

    //初始化所有事件，人员。
    init1() {
      this.$http({
        fun: "eventNoList",
        start_time: this.$util.date2str(new Date()) + " 00:00:00",
        end_time: this.$util.date2str(new Date()) + " 23:59:59",
        grid_id: "1",
        status: "1",
        cb: (res) => {
          console.log("初始化数据");
          console.log(res);
          res.forEach((item) => {
            const info = {
              ...item,
              what: "question",
              lon: item.event_longitude,
              lat: item.event_latitude,
            };

            let obj = {
              position: [item.event_longitude, item.event_latitude],
              events: {
                click: () => {
                  this.clickMarker1(info);
                },
              },
              visible: true,
              info,
              icon: "./event.png",
            };
            this.eventMarkers.push(obj);
          });
        },
      });

      this.$http({
        fun: "onlineNoList",
        grid_id: "1",
        cb: (res) => {
          console.log("初始化人员数据");
          console.log(res);
          res.forEach((item) => {
            const info = {
              ...item,
              what: "user",
              lon: item.now_longitude,
              lat: item.now_latitude,
            };

            let obj = {
              position: [item.now_longitude, item.now_latitude],
              events: {
                click: () => {
                  this.clickMarker1(info);
                },
              },
              visible: true,
              info,
              icon: "./user.png",
            };
            this.eventMarkers.push(obj);
          });

          console.log("this.eventMarkers");
          console.log(this.eventMarkers);
        },
      });

      // var adcodes = [310000, 330100, 330200];

      //districtExplorer.loadMultiAreaNodes(adcodes, function(error, areaNodes) {

      this.$http({
        fun: "grideList",
        cb: (res) => {
          console.log("subGrideNoList");
          console.log(res);

          //mapinfo type > 2 的，存的是点数组，小于等于2的需要查询。
          let xiaoyu2 = [];
          let dayu2 = [];
          res.forEach((item) => {
            if (item.mapinfo != undefined && item.mapinfo != "") {
              if (parseInt(item.type) > 2) {
                dayu2.push(JSON.parse(item.mapinfo));
              } else if (parseInt(item.type) <= 2) {
                xiaoyu2.push(item.mapinfo);
              }
            }
          });

          console.log("需要画网格的数据");
          console.log(dayu2);
          console.log(xiaoyu2);

          this.xiaoyu2grid(xiaoyu2);
          this.dayu2grid(dayu2);
        },
      });
    },

    //小于2的画网格
    xiaoyu2grid(adcodes) {
      lazyAMapApiLoaderInstance.load().then(() => {
        AMap.plugin("AMap.DistrictSearch", () => {
          // 创建行政区查询对象
          var district = new AMap.DistrictSearch({
            // 返回行政区边界坐标等具体信息
            extensions: "all",
            // 设置查询行政区级别为 区
            level: "district",
          });

          //var adcodes = ['610427'];

          adcodes.forEach((adcode) => {
            district.search(adcode, (status, result) => {
              console.log(adcode);
              console.log(result);
              let path = [];
              path = result.districtList[0].boundaries;
              this.polygons.push({
                path,
                fillOpacity: 0,
              });
            });
          });
        });
      });
    },

    dayu2grid(data) {
      data.forEach((item) => {
        this.polygons.push({
          path: item.path,
          fillOpacity: 0,
        });
      });
    },

    initPage(DistrictExplorer) {
      const map = this.amapManager.getMap();

      //创建一个实例
      var districtExplorer = new DistrictExplorer({
        map, //关联的地图实例
      });

      var adcode = ["610428", "610426"];

      districtExplorer.loadMultiAreaNodes(adcode, (error, areaNode) => {
        if (error) {
          console.error(error);
          return;
        }

        console.log("areaNode");
        console.log(areaNode);

        //绘制载入的区划节点
        this.renderAreaNode(districtExplorer, areaNode);
      });
    },

    renderAreaNode(districtExplorer, areaNodes) {
      //清除已有的绘制内容
      districtExplorer.clearFeaturePolygons();

      //just some colors
      var colors = [
        "#3366cc",
        "#dc3912",
        "#ff9900",
        "#109618",
        "#990099",
        "#0099c6",
        "#dd4477",
        "#66aa00",
      ];

      areaNodes.forEach((areaNode) => {
        //绘制父级区划，仅用黑色描边
        districtExplorer.renderParentFeature(areaNode, {
          cursor: "default",
          bubble: true,
          strokeColor: "black", //线颜色
          fillColor: null,
          strokeWeight: 3, //线宽
        });
      });

      //更新地图视野以适合区划面
      //map.setFitView(districtExplorer.getAllFeaturePolygons());
    },

    //查看事件详情
    onClick(item) {
      this.$http({
        fun: "eventInfo",
        id: item.id,
        cb: (res) => {
          this.$http({
            fun: "flowList",
            id: item.id,
            cb: (res1) => {
              res1.forEach((item) => {
                if (item.params == undefined || item.params == "") {
                  item["paramsobj"] = {
                    content: "",
                  };
                } else {
                  item["paramsobj"] = JSON.parse(item.params);
                }
              });

              this.currentEvent = {
                info: {
                  ...res,
                  imgs: res.question_img ? res.question_img.split(",") : [],
                  videos: res.question_video
                    ? res.question_video.split(",")
                    : [],
                },
                flow: res1,
              };
              this.activeName2 = "first";
              this.eventDialogVisible = true;
            },
          });
        },
      });
    },
  },

  watch: {},

  mounted() {
    this.init();

    this.$http({
      fun: "grideList",
      cb: (res) => {
        const result = this.$util.transData(res, "id", "parent_id", "children");
        console.log('result grid list: ', result);
        this.treedata = result;
      },
    });

    this.init1();

    this.center = this.c;
  },
};
</script>

<style>
.amap-wrapper {
  width: 500px;
  height: 500px;
}

.a1 {
  position: absolute;
  /*background-color: #2092ab;*/
  /*padding: 0 10px;*/
}

.a2 {
  position: absolute;
  width: 414px;
  z-index: 999;
}

.a3 {
  width: 60px;
  height: 42px;
  background: #4bacc6;
  color: #fff;
  text-align: center;
  padding-top: 18px;
  margin-top: 10px;
  border-radius: 7px;
}

.a4 {
  width: 60px;
  height: 52px;
  background: #4bacc6;
  color: #fff;
  text-align: center;
  padding-top: 8px;
  margin-top: 10px;
  border-radius: 7px;
}
</style>
